<template>
    <div class="page-wrap">
        <div>
            <filter-form @change="handleSearch" />
        </div>
        <a-divider class="full-divider-h" />
        <flexbox class="margin-b-8" justify="flex-end">
            <a-button type="primary" @click="handleAdd">新建</a-button>
        </flexbox>
        <custom-table
            autoResize
            rowKey="id"
            size="small"
            :loading="loading"
            :columns="tableColumns"
            :data-source="list"
            :pagination="paginationConfig"
            @change="handleTableChange"
        >
            <template #catalogType="{ text }">
                {{ $filters.catalogTypeFilter(text) }}
            </template>
            <template #signpostName="{ record }">
                <a @click="showDetail(record.id)">{{ record.signpostName }}</a>
            </template>
            <template #productManagers="{ record }">
                <span>{{ record.productManagers }}</span>
            </template>
            <template #expirationDate="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #startTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #endTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #createTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #updateTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #isLaunchNextPhase="{ record }">
                <a-select size="small" placeholder="请选择" v-model:value="record.isLaunchNextPhase">
                    <a-select-option key="1"> 是 </a-select-option>
                    <a-select-option key="0"> 否 </a-select-option>
                </a-select>
            </template>
            <template #signpostPlanPeriod="{ text }">
                {{ $filters.signpostPlanPeriodFilter(text) }}
            </template>
            <template #status="{ text }">
                {{ $filters.lubiaoStatusFilter(text) }}
            </template>

            <template #pmpVersionManagementDTO="{ text }">
                {{ text ? text.versionNumber : '' }}
            </template>

            <template #versionProgress="{ record }">
                <flexbox>
                    <span>{{ record.releaseVersionCount }}</span>
                    <div>
                        <span>({{ (record.versionCount ? (record.releaseVersionCount / record.versionCount).toFixed(1) : 0) + '%' }})</span>
                    </div>
                </flexbox>
            </template>
            <template #proProgress="{ record }">
                <flexbox>
                    <span>{{ record.releaseProductCount }}</span>
                    <span>({{ (record.productCount ? record.releaseProductCount / record.productCount : 0) + '%' }}) </span>
                </flexbox>
            </template>
        </custom-table>
        <EditLubiaoModal ref="EditLubiaoModalRef" @success="handleSuccess" />
    </div>
</template>

<script lang="ts">
import { useRouter } from 'vue-router';
import EditLubiaoModal from './components/EditLubiaoModal.vue';
import CustomTable from '@/components/Table/CutomTable.vue';
import FilterForm from './components/filterForm.vue';
import { useTableData, useTableLoading, usePagination, useTableColumns, useTableFormSearch } from '@/components/Table/hooks/index';
import { useMountedAndActivated } from '@/hooks/common/useMountedAndActivated';
import { ref, defineComponent, unref } from 'vue';
export default defineComponent({
    components: {
        FilterForm,
        CustomTable,
        EditLubiaoModal
    },
    setup() {
        const router = useRouter();
        const { loading, setLoading } = useTableLoading();
        const { paginationConfig, setPaginationConfig } = usePagination();
        const { columns: tableColumns } = useTableColumns('myLubiaoList');
        const { list, getList, handleTableChange, setSearchQuery } = useTableData(setLoading, paginationConfig, setPaginationConfig, 'myLubiaoList');
        const { handleSearch } = useTableFormSearch(setPaginationConfig, setSearchQuery, getList);

        const EditLubiaoModalRef = ref<any>();
        const handleAdd = () => {
            unref(EditLubiaoModalRef).open();
        };
        const handleSuccess = () => {
            getList();
        };
        const showDetail = (id) => {
            router.push({
                path: '/lubiao/my/detail',
                query: {
                    id
                }
            });
        };
        setSearchQuery({
            selectType: 'my'
        });
        useMountedAndActivated(getList);
        return {
            EditLubiaoModalRef,
            list,
            tableColumns,
            loading,
            paginationConfig,
            handleTableChange,
            handleSearch,
            handleAdd,
            handleSuccess,
            showDetail
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 12px;
    background: #fff;
    .table-title {
        font-size: 16px;
        font-weight: bold;
    }
    ::v-deep(.full-divider-h) {
        margin-top: 0px !important;
    }
}
</style>